{extend name="index@layout" /}

{block name="body_wraper_start"}<div class="main welcome">{/block}
{block name="body_wraper_end"}</div>{/block}

{block name="body_ExtraHead"}
<style>
	.bocweb-header {
		background: #18b7de;
		border-bottom: 1px solid #65676e;
	}

	@media (max-width: 1024px) {
		.bocweb-header {
			background: #fff;
			border-bottom: 1px solid #fff;
		}
	}

	.main.welcome .box .box_cen .box_r .map_address .item.item10 {
		display: none;
	}
</style>
{/block}

{block name="body_AllScorllSlide"}

<div class="banner">

	{qb:tag name="pc_index_slidepic" type="images" val="listdb"}
	<div class="banner_pc">
		<ul>
			{volist name="listdb" id="rs"}

			<li style="background:url({$rs.picurl}) no-repeat center center;background-size:cover;">
				<a href="{$rs.url}">
					<div class="z-text w1560">
						<div class="tit1 col-fff">Vision</div>
						<div class="tit2 col-fff">{$rs.title}</div>
						<div class="tit3 col-fff"></div>
						<div class="down down2"></div>
					</div>
				</a>
			</li>

			{/volist}

		</ul>
		<div class="controls">
			<div class="btn_l"></div>
			<div class="dots">
				<a href="javascript:;" class="active"><span>01</span></a>
				<a href="javascript:;" ><span>02</span></a>
				<a href="javascript:;" ><span>03</span></a>
				<a href="javascript:;" ><span>04</span></a>
			</div>
			<div class="btn_r"></div>
		</div>
	</div>
	<div class="banner_m">
		<div class="swiper-container">
			<div class="swiper-wrapper">

				{volist name="listdb" id="rs"}
				<div class="swiper-slide" style="background-image:url({$rs.picurl})">
					<a href="javascript:;">
						<!-- <img src="" alt=""> -->

						<div class="z-text w1560">
							<div class="tit1 col-fff">Vision</div>
							<div class="tit2 col-fff">{$rs.title}</div>
							<div class="tit3 col-fff"></div>
							<div class="down down2"></div>
						</div>
					</a>
				</div>
				{/volist}

			</div>
			<div class="swiper-pagination"></div>
		</div>
	</div>

	{/qb:tag}
</div>

<!--幻灯片---->
<div style="margin-top: 70px;"></div>
{qb:tag name="pc_index_slidepic2" type="images" val="listdb"}
	<!--
	<div class="qb_ui_SlideStyle1" height='400'>
		<div class="slide">
			<ul>
				<li><a href="https://mall.jijieu.com" target="_blank"><img src="__STATIC__/images/ju/jubanner.jpg"></a><span>标题1</span></li>
				<li><a  href="https://mall.jijieu.com" target="_blank"><img src="__STATIC__/images/ju/jubanner.jpg"></a><span>标题2</span></li>
				<li><a  href="https://mall.jijieu.com" target="_blank"><img src="__STATIC__/images/ju/jubanner.jpg"></a><span>标题3</span></li>
				<li><a  href="https://mall.jijieu.com" target="_blank"><img src="__STATIC__/images/ju/jubanner.jpg"></a><span>标题4</span></li>
			</ul>
		</div>
	</div>
	-->
{/qb:tag}
<script type="text/javascript" src="__STATIC__/js/slidestyle1.js"></script>

{/block}

{block name="body_content"}

<div class="business_box">
	<div class="business_box_cen w1560">
		<div class="title wow fadeInUp">
			<div class="en_tit">{qb:tag name="index_en_overview" type="text"}Business overview{/qb:tag}</div>
			<div class="cn_tit">{qb:tag name="index_zh_overview" type="text"}业务概览{/qb:tag}</div>
			<div class="line"></div>
		</div>

		<div class="business_m business_list_box">
			<div class="swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<a href="javascript:;" data-id="1">

							<div class="tit_top">
								<div class="icon">
									{qb:tag name="index_overview_image1" type="image"}
									<img src="__STATIC__/qy_dd/upload/2018/12/27/15458478698854qbc2m.jpg"
										 alt="">
									{/qb:tag}
									{qb:tag name="index_overview_image2" type="image"}
									<img src="__STATIC__/qy_dd/upload/2018/12/27/154584715291511bbva.png"
										 alt="" class="active">
									{/qb:tag}
								</div>
								<div class="tit">{qb:tag name="index_overview_txt3" type="text"}产业平台{/qb:tag}</div>
								<div class="btn"></div>
							</div>

							<div class="cont">
								<div class="t">{qb:tag name="index_overview_txt4" type="text"}快速精准匹配行业人才 降低企业招聘成本{/qb:tag}</div>
								<div class="con">
									<p>
									{qb:tag name="index_overview_txt5" type="text"}
									聚焦金融、地产、医药、互联网、新能源五大领域，利用SOP标准化业务流程帮助客户快速准确猎寻行业中高端、专业人才，解决企业招聘难题。
									{/qb:tag}
									</p>
								</div>
								<div class="pic">
									{qb:tag name="index_overview_image6" type="image"}
									<img src="__STATIC__/qy_dd/upload/2018/12/27/154584716109039jpsa.jpg"
										 alt="">
									{/qb:tag}
								</div>
							</div>
						</a>
					</div>
					<div class="swiper-slide">
						<a href="javascript:;" data-id="2">

							<div class="tit_top">
								<div class="icon">
									{qb:tag name="index_overview_image7" type="image"}
									<img src="__STATIC__/qy_dd/upload/2018/12/27/15458478758073pmrog.jpg"
										 alt="">
									{/qb:tag}
									{qb:tag name="index_overview_image8" type="image"}
									<img src="__STATIC__/qy_dd/upload/2018/12/27/15458470893998jr5id.png"
										 alt="" class="active">
									{/qb:tag}
								</div>
								<div class="tit">{qb:tag name="index_overview_txt9" type="text"}交易撮合{/qb:tag}</div>
								<div class="btn"></div>
							</div>

							<div class="cont">
								<div class="t">{qb:tag name="index_overview_txt10" type="text"}技术驱动人力资本变革 帮助企业降本增效{/qb:tag}</div>
								<div class="con">
									<p>
									{qb:tag name="index_overview_txt1" type="text"}
										白领员工是企业非常庞大的群体，熟练的白领更是一笔宝贵的人力资源财富。但是人才竞争日趋激烈，人力资源管理面临基础白领员工的离职流失率高，而需求量又非常大的问题。为解决基础白领用工需求的问题，同时让企业以更低的价格享受专业猎头服务，大瀚推出一站式、定制化的基础白领用工招聘方案。
									{/qb:tag}
									</p>
								</div>
								<div class="pic">
									{qb:tag name="index_overview_image11" type="image"}
									<img src="__STATIC__/qy_dd/upload/2018/12/27/15458470979238topz5.jpg"
										 alt="">
									{/qb:tag}
								</div>
							</div>
						</a>
					</div>
					<div class="swiper-slide">
						<a href="javascript:;" data-id="3">

							<div class="tit_top">
								<div class="icon">
									{qb:tag name="index_overview_image12" type="image"}
									<img src="__STATIC__/qy_dd/upload/2018/12/27/15458478833195ikt57.jpg"
										 alt="">
									{/qb:tag}
									{qb:tag name="index_overview_image13" type="image"}
									<img src="__STATIC__/qy_dd/upload/2018/12/27/15458469632031hmbcj.png"
										 alt="" class="active">
									{/qb:tag}
								</div>
								<div class="tit">{qb:tag name="index_overview_txt14" type="text"}数字化改造{/qb:tag}</div>
								<div class="btn"></div>
							</div>

							<div class="cont">
								<div class="t">{qb:tag name="index_overview_txt15" type="text"}技术驱动人力资本变革 帮助企业降本增效{/qb:tag}</div>
								<div class="con">
									<p>
										{qb:tag name="index_overview_txt17" type="text"}
										智仁人力通过多年在猎头领域的深耕和积累，给客户提供整体化的招聘解决方案，助力客户组织能力的提升！
										{/qb:tag}
									</p>
								</div>
								<div class="pic">
									{qb:tag name="index_overview_image16" type="image"}
									<img src="__STATIC__/qy_dd/upload/2018/12/27/15458469852947kauve.jpg"
										 alt="">
									{/qb:tag}
								</div>
							</div>
						</a>
					</div>
				</div>
				<div class="swiper-pagination"></div>
			</div>
		</div>

		<div class="business_list business_list_box">
			<ul class="f-cb">

				<li class="wow fadeInRight" data-wow-delay="0.15s">
					<a href="javascript:;" data-id="1">
						<div class="tit_top">
							<div class="icon">
								{qb:tag name="index_overview_image18" type="image"}
								<img src="__STATIC__/qy_dd/upload/2018/12/27/15458478698854qbc2m.jpg" alt="">
								{/qb:tag}
								{qb:tag name="index_overview_image19" type="image"}
								<img src="__STATIC__/qy_dd/upload/2018/12/27/154584715291511bbva.png" alt=""
									 class="active">
								{/qb:tag}
							</div>
							<div class="tit">{qb:tag name="index_overview_txt20" type="text"}产业服务{/qb:tag}</div>
							<div class="btn"></div>
						</div>

						<div class="cont">
							<div class="t">{qb:tag name="index_overview_txt21" type="text"}食品产业软硬件系统集成{/qb:tag}</div>
							<div class="con">
								<p>
								{qb:tag name="index_overview_txt22" type="text"}
									致力于打造食品工业互联网平台，值青岛打造“世界工业互联网之都”为契机，将总部从上海迁址至青岛，平台通过“S2B+B2M”模式，为供需双方提供产品展示、推广、销售、采购、追溯为于一体的服务，全过程数据化分析、后台时时信息整合、精准匹配双方需求、提升协同率。
								{/qb:tag}
								</p>
							</div>
							<div class="pic">
								{qb:tag name="index_overview_image23" type="image"}
								<img src="__STATIC__/qy_dd/upload/2018/12/27/154584716109039jpsa.jpg" alt="">
								{/qb:tag}
							</div>
						</div>
					</a>
				</li>

				<li class="wow fadeInRight" data-wow-delay="0.3s">
					<a href="https://mall.jijieu.com" target="_blank" data-id="2">
						<div class="tit_top">
							<div class="icon">
								{qb:tag name="index_overview_image24" type="image"}
								<img src="__STATIC__/qy_dd/upload/2018/12/27/15458478758073pmrog.jpg" alt="">
								{/qb:tag}
								{qb:tag name="index_overview_image25" type="image"}
								<img src="__STATIC__/qy_dd/upload/2018/12/27/15458470893998jr5id.png" alt=""
									 class="active">
								{/qb:tag}
							</div>
							<div class="tit">{qb:tag name="index_overview_txt26" type="text"}交易撮合{/qb:tag}</div>
							<div class="btn"></div>
						</div>

						<div class="cont">
							<div class="t">{qb:tag name="index_overview_txt27" type="text"}精准匹配双方需求、提升协同率{/qb:tag}</div>
							<div class="con">
								<p>
								{qb:tag name="index_overview_txt28" type="text"}
									为解决海内外企业“走进来与走出去”的问题，平台提供一站式代运营服务，对于海外企业，平台提供品牌管理、进口代理、报关报验、仓储物流配送、全国各地DC供应链服务、订单管理、支付功能等服务，让海外的中小企业足不出户，实现在中国市场进行线上、线下推广销售。
								{/qb:tag}
								</p>
							</div>
							<div class="pic">
								{qb:tag name="index_overview_image29" type="image"}
								<img src="__STATIC__/qy_dd/upload/2018/12/27/15458470979238topz5.jpg" alt="">
								{/qb:tag}
							</div>
						</div>
					</a>
				</li>
				<li class="wow fadeInRight" data-wow-delay="0.45s">
					<a href="javascript:;" data-id="3">
						<div class="tit_top">
							<div class="icon">
								{qb:tag name="index_overview_image30" type="image"}
								<img src="__STATIC__/qy_dd/upload/2018/12/27/15458478833195ikt57.jpg" alt="">
								{/qb:tag}
								{qb:tag name="index_overview_image31" type="image"}
								<img src="__STATIC__/qy_dd/upload/2018/12/27/15458469632031hmbcj.png" alt=""
									 class="active">
								{/qb:tag}
							</div>
							<div class="tit">{qb:tag name="index_overview_txt32" type="text"}数字化改造{/qb:tag}</div>
							<div class="btn"></div>
						</div>

						<div class="cont">
							<div class="t">{qb:tag name="index_overview_txt33" type="text"}技术驱动行业变革 帮助企业降本增效{/qb:tag}</div>
							<div class="con">
								<p>
								{qb:tag name="index_overview_txt34" type="text"}
									秉承“集结世界，服务中国”的服务理念，夯实现存资源，整合供应链，降低采购成本，以精准化、个性化、品牌化为导向服务民营和中小食品企业，向早日实现平台产业链一站式服务的目标而努力奋斗！
								{/qb:tag}
								</p>
							</div>
							<div class="pic">
								{qb:tag name="index_overview_image35" type="image"}
								<img src="__STATIC__/qy_dd/upload/2018/12/27/15458469852947kauve.jpg" alt="">
								{/qb:tag}
							</div>
						</div>
					</a>
				</li>

			</ul>

		</div>

{qb:tag name="index_overview_click" type="textarea"}
<script type="application/javascript">
	$(function(){
	if (getCookie('label_set') != 'set') {
	$('.business_list_box a').click(function () {
		switch ($(this).attr('data-id')) {
			case "1":
				location.href="";
				break;
			case "2":
				location.href="";
				break;
			case "3":
				location.href="";
				break;
		}
	})
	}
	})
</script>
{/qb:tag}

	</div>

</div>

<div class="box"
	 style="background:url(__STATIC__/qy_dd/web/img/index_bg.jpg?v=v11) no-repeat;background-size:100% 100%;">
	<div class="box_cen w1560 f-cb">
		<div class="box_l wow fadeInUp">
			<div class="title">
				<div class="en_tit">{qb:tag name="index_national_en" type="text"}National distribution{/qb:tag}</div>
				<div class="cn_tit">{qb:tag name="index_national_zh" type="text"}全国分布{/qb:tag}</div>
				<div class="line"></div>
			</div>

			{qb:tag name="index_national_scroll" type="textarea"}
			<div class="scroll">
				<ul>
					<li class="active">
						<div class="num">01</div>
						<div class="cont">
							<div class="address">青岛总部</div>
							<div class="msg">
								<p>地址：自由贸易试验区青岛片区自贸大厦</p>
							</div>
						</div>
					</li>
					<li class="active">
						<div class="num">02</div>
						<div class="cont">
							<div class="address">青岛运营中心</div>
							<div class="msg">
								<p>地址：市南区东海西路凯旋大厦</p>
							</div>
						</div>
					</li>
					<li class="active">
						<div class="num">03</div>
						<div class="cont">
							<div class="address">上海运营中心</div>
							<div class="msg">
								<p>地址：宝山区沪太路</p>
							</div>
						</div>
					</li>
				</ul>
			</div>
			{/qb:tag}
		</div>

		<div class="box_r wow fadeInUp" data-wow-delay="0.2s">
			<img src="__STATIC__/qy_dd/web/img/map.png?v=v11" alt="">
			<div class="map_address">
				{qb:tag name="index_national_scroll_box" type="textarea"}
				<div class="item active" style="left: 80%; top: 45%;"><span>青岛</span></div>
				<div class="item" style="left: 83%; top: 63%;"><span>上海</span></div>
				{/qb:tag}
			</div>
		</div>
	</div>
</div>


<div class="talent"
	 style="background:url(__STATIC__/qy_dd/upload/2019/03/18/15528994710997b12mq.jpg) no-repeat;background-size:cover">
	<div class="title wow fadeInUp w1560">
		<div class="en_tit">{qb:tag name="index_talent_en" type="text"}产品与服务{/qb:tag}</div>
		<div class="cn_tit">{qb:tag name="index_talent_zh" type="text"}
		新趋势、新模式、数字化车间 —— 为制造业转型升级赋能
		{/qb:tag}</div>
		<div class="line"></div>
	</div>
	<div class="pic wow mk_bottom_to_top_scale">
		<p>
<!-- 			{qb:tag name="index_talent_show" type="image"}
				{empty name="picurl"}
				<img src="__STATIC__/qy_dd/web/img/t.png"/>
				{else /}
				<div class="qb_ui_AllscrollBanner">
					<a href="{$url}"><img src="{$picurl}"></a>
				</div>
				{/empty}
			{/qb:tag} -->
<!-- <img src="http://mall.yesi-cz.com/skin/images/nybanner.jpg" /> -->
		</p></div>
</div>
{include file="index@block/youshi" /}
<!-- <div class="team wow fadeInUp">
	<div class="title w1560">
		<div class="en_tit">{qb:tag name="index_team_en" type="text"}Team building{/qb:tag}</div>
		<div class="cn_tit">{qb:tag name="index_team_zh" type="text"}团队建设{/qb:tag}</div>
		<div class="line"></div>
	</div>
	<div class="slick_box" id="slick_box">

	</div>

	<div id="slider_content" style="heigth:35px;width:150px;margin:0 auto;overflow: hidden;">
	{qb:tag name="index_gallery" type="cms" row="9" name='lists'}

			<div class="item" data-text="{$rs.title}">
				<div class="pic">
					{notempty name="rs.picurl"}
					<img src="{$rs.picurl}" onmouseover='thisimg_over($(this))' onmouseout='thisimg_out($(this))' />
					{/notempty}
				</div>
				<div class="shadow">
					<img src="__STATIC__/qy_dd/web/img/shadow.png?v=v11" alt="{$rs.title}">
				</div>
				<div class="mask"></div>
			</div>

	{/qb:tag}
	</div>

	<script type="text/javascript">
		$(function(){
			$('#slick_box').html($('#slider_content').html());
			$('#slider_content .item').hide()
		})
	</script>

	<div class="controls_box f-cb">
		<div class="control">
			<span class="cur">1</span>/<span class="count">9</span>
		</div>
		<div class="line"></div>
		<div class="text">{qb:tag name="index_control_zh" type="text"}团队合照{/qb:tag}</div>
		<div class="btn_box">
			<div class="btn_l"></div>
			<div class="btn_r"></div>
		</div>
	</div>

</div>

 -->
<div class="cooperation"
	 style="background:url(__STATIC__/qy_dd/web/img/cop_bg.jpg?v=v11) no-repeat bottom center #e9eef3;background-size:cover">
	<div class="title wow fadeInUp w1560">
		<div class="en_tit">{qb:tag name="index_cooperation_en" type="text"}News{/qb:tag}</div>
		<div class="cn_tit">{qb:tag name="index_cooperation_zh" type="text"}合作动态{/qb:tag}</div>
		<div class="line"></div>
	</div>
	<div class="list w1560 wow fadeInUp">
		<div class="swiper-container">
			<div class="swiper-wrapper">

				{qb:tag name="index_cooperation_gallery" type="cms"}
				<div class="swiper-slide">
<a href="{$rs.url}">
					<div class="item">
						<div class="pic">
							{notempty name="rs.picurl"}
							<img src="{$rs.picurl|tempdir}" alt="{$rs.title}">
							{/notempty}
						</div>
						<div class="text">{$rs.title}</div>
					</div>
</a>
				</div>

				{/qb:tag}

			</div>
			<div class="swiper-pagination"></div>
		</div>
	</div>
</div>
</div>

<!-- 视频弹框 -->
<div class="vwrap">
	<div class="bg"></div>
	<div class="video_b">
		<div class="close"></div>
		<div id="video_box"></div>
	</div>
</div>
<!-- 视频弹框 end-->

{/block}

{block name="html_ExtraJsEnd"}
<script>
	$(function () {

		$(window).scroll(function () {
			if (pc) {
				if ($(window).scrollTop() > 0) {
					$('.bocweb-header').addClass('cur');
				} else {
					$('.bocweb-header').removeClass('cur');
				}
			}
		})
		var winH = $(window).height(), winW = $(window).width();
		// $('.banner_pc').css('padding-bottom',(winH/winW)*100+'%');
		$('.banner_pc').height(winH);

		$(window).resize(function () {
			winH = $(window).height();
			winW = $(window).width();
			$('.banner_pc').height(winH);
			// $('.banner_pc').css('padding-bottom',(winH/winW)*100+'%');
		})
		var mySwiper = new Swiper('.banner_m .swiper-container', {
			loop: true,
			autoplay: 6000,
			speed: 500,
			autoplayDisableOnInteraction: false,
			pagination: '.banner_m .swiper-pagination',
			paginationClickable: true,

		})


		var mySwiper2 = new Swiper('.business_m .swiper-container', {
			speed: 500,
			pagination: '.business_m .swiper-pagination',
			paginationClickable: true,
			slidesPerView: 2,
			spaceBetween: 20,
			breakpoints: {
				600: {
					slidesPerView: 1
				}
			}
		})
		var mySwiper3 = new Swiper('.cooperation .swiper-container', {
			speed: 500,
			pagination: '.cooperation .swiper-pagination',
			paginationClickable: true,
			slidesPerView: 5,
			spaceBetween: 32,
			autoplay: 3000,
			autoplayDisableOnInteraction: false,
			breakpoints: {
				1200: {
					spaceBetween: 20
				},
				850: {
					spaceBetween: 15,
					slidesPerView: 4
				},
				600: {
					spaceBetween: 15,
					slidesPerView: 3
				},
				435: {
					spaceBetween: 10,
					slidesPerView: 2
				}
			}
		})


		$('.video').click(function () {
			var videoUrl = $(this).attr('data-videoUrl');
			jwplayer('video_box').setup({
				'flashplayer': '__STATIC__/qy_dd/web/js/jwplayer/jwplayer.flash.swf?v=v11',

				// 'image':imgUrl , 预览图片
				'autostart': true,
				'width': '100%',
				'aspectratio': '1200:600',
				'file': videoUrl
			});
			$('.vwrap').addClass('active');
		})

		$('.vwrap .close').click(function () {
			$('.vwrap').removeClass('active');
			$('#video_box').empty();
		})

		var len = $('.slick_box .item').length;
		$('.controls_box .count').text(len);


		$('.slick_box').on('init', function (slick) {
			$('.controls_box .text').text($('.slick_box .item').eq(2).attr('data-text'));
			$('.slick_box .pic').height(Math.floor($('.slick_box .item').width() * (540 / 1080)));
			$(window).resize(function () {
				setTimeout(function () {
					$('.slick_box .pic').height(Math.floor($('.slick_box .item').width() * (540 / 1080)));
				}, 300);
			})
		})

		$('.slick_box').slick({
			centerMode: true,
			slidesToShow: 1,
			mobileFirst: true,
			autoplay: true,
			autoplaySpeed: 4000,
			responsive: [
				{
					breakpoint: 850,
					settings: {
						centerPadding: '21.62%',
					}
				},
				{
					breakpoint: 0,
					settings: {
						centerPadding: '12%',
					}
				}
			]
		});


		$('.slick_box').on('swipe', function (event, slick, direction) {
			$('.controls_box .cur').text(slick.currentSlide + 1);
			$('.controls_box .text').text($('.slick_box .item').eq(slick.currentSlide + 2).attr('data-text'));
		});
		$('.slick_box').on('afterChange', function (slick, ele) {
			$('.controls_box .cur').text(ele.currentSlide + 1);
			$('.controls_box .text').text($('.slick_box .item').eq(ele.currentSlide + 2).attr('data-text'));
		})


		$('.controls_box .btn_box .btn_r').click(function () {
			$('.slick_box').slick('slickNext');
		})

		$('.controls_box .btn_box .btn_l').click(function () {
			$('.slick_box').slick('slickPrev');
		})
	})
</script>

<script>
	$(function () {
		var winW = $(window).width();
		var h = $('.scroll ul li').height();
		var mb = parseInt($('.scroll ul li').css('margin-bottom'));

		if (winW > 1150) {
			$('.scroll').height(h * 3 + mb * 2);
		} else {
			$('.scroll').height(h * 2 + mb);
		}


		$(window).resize(function () {
			h = $('.scroll ul li').height();
			mb = parseInt($('.scroll ul li').css('margin-bottom'));
			if (winW > 1150) {
				$('.scroll').height(h * 3 + mb * 2);
			} else {
				$('.scroll').height(h * 2 + mb);
			}
		})
		$('.scroll').mCustomScrollbar({})


		$('.map_address .item').click(function () {
			var index = $(this).index();
			$(this).addClass('active').siblings().removeClass('active');
			$('.scroll ul li').eq(index).addClass('active').siblings().removeClass('active');
			$(".scroll").mCustomScrollbar("scrollTo", $('.scroll li.active'));
		})

		$(".down2").click(function () {
			$('html,body').animate({
				'scrollTop': $('.banner').height()
			})
		})
	})
</script>
{/block}